<%@ page import="dk.fuddi.grails.Earthquake" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main"/>
  <title>Show Earthquake</title>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var myLatlng = new google.maps.LatLng(${earthquakeInstance.lat}, ${earthquakeInstance.lng});
      var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var marker = new google.maps.Marker({
        position: myLatlng,
        title:"${earthquakeInstance.title}"
      });

      // To add the marker to the map, call setMap();
      marker.setMap(map);
    }
  </script>

</head>
<body onload="initialize();">
<div class="nav">
  <span class="menuButton"><a class="home" href="${resource(dir: '')}">Home</a></span>
  <span class="menuButton"><g:link class="list" action="list">Earthquake List</g:link></span>
  <span class="menuButton"><g:link class="create" action="create">New Earthquake</g:link></span>
</div>
<div class="body">
  <h1>Show Earthquake</h1>
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <div class="dialog">
    <table>
      <tbody>

      <tr class="prop">
        <td valign="top" class="name">Id:</td>
        <td valign="top" class="value">${fieldValue(bean: earthquakeInstance, field: 'id')}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Lat:</td>
        <td valign="top" class="value">${earthquakeInstance.lat}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Lng:</td>
        <td valign="top" class="value">${earthquakeInstance.lng}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Magnitude:</td>
        <td valign="top" class="value">${earthquakeInstance.magnitude}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Name:</td>
        <td valign="top" class="value">${earthquakeInstance.name}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Title:</td>
        <td valign="top" class="value">${earthquakeInstance.title}</td>
      </tr>

      <tr class="prop">
        <td valign="top" class="name">Updated:</td>
        <td valign="top" class="value">${earthquakeInstance.updated}</td>
      </tr>

      </tbody>
    </table>
  </div>
  <div class="buttons">
    <g:form>
      <input type="hidden" name="id" value="${earthquakeInstance?.id}"/>
      <span class="button"><g:actionSubmit class="edit" value="Edit"/></span>
      %{--<span class="button"><g:actionSubmit class="delete" onclick="return confirm('Are you sure?');" value="Delete"/></span>--}%
    </g:form>
  </div>
  <br/>
  <div id="map_canvas" style="width: 100%; height: 300px"></div>
</div>

</body>
</html>
